<style lang="scss">
    .lifeguard-list {
        padding: 0 .24rem;
        li {
            border-bottom: 1px solid #EEEEEE;
            height: 1.44rem;
            padding: .24rem 0;
            &.not-active{
                opacity: 0.4;
            }
        } 
        .basic-info {
            float: left;
            .mintui {
                font-size: .26rem;
                color: #1C93FB;
            }
            .name-rate {
                font-size: .32rem;
                height: .48rem;
                line-height: .48rem;
                .name {
                    margin-right: .24rem;
                }
                .el-rate {
                    display: inline-block;
                    vertical-align: middle;
                }
                .el-rate__icon  {
                    font-size: .32rem!important;
                }
            }
            .contact {
                font-size: .24rem;
                height: .48rem;
                line-height: .48rem;
                color: #CCCCCC;
                span {
                    &:last-child {
                        margin-left: .36rem;
                    }
                }
            }
        }
        .commuter-time {
            float: right;
            font-size: .22rem;
            span {
                display: block;
                height: .48rem;
                line-height: .48rem;
            }
        }
    }
</style>

<template>
    <div class="page-wrapper">
        <mt-header fixed title="在岗救生员">
            <mt-button icon="back" slot="left" @click="$router.push('/homepage')"></mt-button>
            <mt-button icon="add" slot="right" @click="addLifeGuardModal.visible = true"></mt-button>
        </mt-header>
        <ul class="lifeguard-list">
            <li :class="['clearfix', n < 4 ? '' : 'not-active']"
                v-for="n in [1,2,3,4,5]" 
                :key="n">
                <div class="avatar">
                    <img src="~assets/img/avator.png" alt="placer">
                    <img v-if="false" src="~assets/img/home-logo.png" alt="avatar"/>
                </div>
                <div class="basic-info">
                    <div class="name-rate">
                        <span class="name">张少侠</span>
                        <el-rate
                            :value="n - 0.1"
                            :max="4"
                            :colors="['#1C93FB','#1C93FB','#1C93FB']"
                            disabled-void-color="#e5f1fc"
                            disabled>
                        </el-rate>
                    </div>
                    <div class="contact">
                        <span><i class="mintui mintui-mobile"></i>13946836132</span>
                        <span><i class="mintui mintui-wechat"></i> ADMIN</span>
                    </div>
                </div>
                <div class="commuter-time">
                    <span>上班时间 14:00</span>
                    <span>下班时间 18:00</span>
                </div>
            </li>
        </ul>
        <AddLifeGuardModal v-model="addLifeGuardModal.visible"></AddLifeGuardModal>
    </div>
</template>

<script>
    import AddLifeGuardModal from './AddLifeGuardModal.vue'
    export default {
        components: {
            AddLifeGuardModal,
        },
        data() {
            return {
                value5: 1.7,
                addLifeGuardModal: {
                    visible: false,
                }
            }
        }
    }
</script>
